import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-raw.less';

/**
 * @description 虚拟表单直接内容
 * @export
 * @class AppVisualRaw
 * @extends {Vue}
 */
@Component({})
export class AppVisualRaw extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualRaw
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualRaw
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualRaw
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualRaw
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualRaw
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualRaw
   */
  @Prop() realCompRef!: any;

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualRaw
   */
  public render() {
    return (
      <div
        class={"app-visual-raw luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
          lineHeight: `${this.position.height}px`,
        }}
      >
        <div class="raw-content">{this.realCompRef.content}</div>
      </div>
    );
  }
}
